<template>
        <div class="father">
                <h2>父组件</h2>
                <h3>银子：{{ money }}</h3>
                <h3>车子：一辆{{ car.brank }}车，价值{{ car.price }}万元</h3>
                <Child></Child>
        </div>
</template>
<script setup lang="ts">
import Child from './Child.vue';
import {ref,reactive,provide} from 'vue'
let money = ref(100)
let car = reactive({
        brank:'奇瑞',
        price:'14'
})
function updateMoney(value:number) {
        money.value -= value
}
//向其后代提供数据
provide('moneyContext',{money,updateMoney})
provide('car',car)
</script>
<style scoped>
.father {
        background: #ffe8e8;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
        margin: 0 10px;
}
</style>